<template>
    <div class="sport-card" :class="{ 'updated': isUpdated }">
      <h3>今日运动数据</h3>
      <p>运动时长：{{ data.time }}分钟</p>
      <p>行走步数：{{ data.foots }}步</p>
      <p>运动距离：{{ data.long }}公里</p>
      <button @click="updateData">更新数据</button>
    </div>
  </template>
  
  <script setup>
  import { ref, onUpdated } from 'vue';
  
  // 定义响应式数据对象
  const data = ref({
    time: 0,
    foots: 0,
    long: 0
  });
  const isUpdated = ref(false);
  
  // onUpdated 生命周期函数，数据更新后触发
  onUpdated(() => {
    isUpdated.value = true;
    // 可添加样式变化后的其他逻辑，比如几秒后移除样式等（这里简单控制样式类）
  });
  
  // 定义更新数据的函数
  const updateData = () => {
    data.value = {
      time: 68,
      foots: 11896,
      long: 7.96
    };
  };
  </script>
  
  <style scoped>
  </style>